<template>
  <div>
    <div style="width: 2560px;height: 1650px" ref="chartsDOM"></div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      timer: "", //定义一个定时器
      nowTime: "",
      isLoading: true,
      yearData: {}
    };
  },
  mounted() {
    let myChart = this.$echarts.init(this.$refs["chartsDOM"]);
    const china = require('@/assets/js/china.json');
    this.$echarts.registerMap("China", china);

    // 验证后的坐标（使用高德坐标系）
    const points = {
      bj: [116.405285, 39.904989],  // 北京
      jx: [115.85794, 28.68202],  // 南昌
      gd: [113.26443, 23.12916]   // 广州
    };

    let option = {
      geo: {
        map: 'China',
        roam: true,
        label: {
          show: true,
          color: '#333'
        },
        itemStyle: {
          areaColor: '#f0f5ff',
          borderColor: '#999'
        }
      },
      series: [
        // 修正后的路径系列
        {
          type: 'lines',
          coordinateSystem: 'geo',
          polyline: true, // 关键配置：允许多点连线
          effect: {
            show: true,
            period: 6,
            trailLength: 0.4,
            symbol: 'arrow',
            symbolSize: 10,
            color: '#ff0000'
          },
          lineStyle: {
            color: '#1890ff',
            width: 3,
            type: 'solid',
            curveness: 0.2 // 添加曲线效果
          },
          data: [{
            coords: [
              points.bj,
              points.jx,
              points.gd // 确保三个点顺序连接
            ]
          }]
        },
        // 标记点系列（优化样式）
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: 20,
          label: {
            show: true,
            formatter: '{@[2]}',
            position: 'right',
            color: '#fff',
            backgroundColor: 'rgba(0,0,0,0.7)',
            padding: [4, 8]
          },
          itemStyle: {
            color: (params) => {
              const type = params.data.value[2];
              return {
                '起点': '#1890ff',
                '途经点': '#1890ff',
                '终点': '#ff4d4f'
              }[type];
            },
            borderColor: '#fff',
            borderWidth: 2
          },
          data: [
            { value: [...points.bj, '起点'] },
            { value: [...points.jx, '途经点'] },
            { value: [...points.gd, '终点'] }
          ]
        }
      ]
    };
    myChart.setOption(option);
  },
  methods: {
    getTime() {
    },
    cancelLoading() {
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>
<style lang="scss" scoped>
.bg {
  background-size: 100% 100%;
  background-color: #030409;
  box-shadow: 0 0 3px blue;
  color: #fff;
  width: 100%;
  height: 100%;
}

.nowtime {
  position: absolute;
  right: 100px;
  top: 5px;
}
</style>
